<template>
  <div>
    <el-row>
      <el-col :span="4">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
      </el-col>
      <el-col :span="20">
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
        >
          <el-row>
            <el-col :span="4" v-for="item in buttonDisplay" :key="item.code">
              <el-checkbox :label="item.code">{{ item.text }}</el-checkbox>
            </el-col>
          </el-row>
        </el-checkbox-group>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkAll: false,
      checkedCities: [],
      isIndeterminate: true,
      buttonDisplay: [
        {
          value: false,
          code: 11,
          text: "结束办案",
        },
        {
          value: false,
          code: 6,
          text: "笔录校对",
        },
        {
          value: false,
          code: 5,
          text: "电子签章",
        },
        {
          value: false,
          code: 16,
          text: "查看同案笔录",
        },
        {
          value: false,
          code: 8,
          text: "告知书",
        },
        {
          value: false,
          code: 1,
          text: " 证据管理",
        },
        {
          value: false,
          code: 17,
          text: "及时通信",
        },
        {
          value: false,
          code: 9,
          text: "拓展功能",
        },
        {
          value: false,
          code: 55,
          text: "工作说明",
        },
      ],
    };
  },
  methods: {
    handleCheckAllChange(val) {
      let cityOptions = [];
      this.buttonDisplay.map((e) => {
        cityOptions.push(e.code);
      });
      this.checkedCities = val ? cityOptions : [];
      console.log(this.checkedCities);
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.buttonDisplay.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.buttonDisplay.length;
    },
  },
};
</script>